<template>
  <div class="footer">
    <div class="footer-wrap">
      <p>©2021 by iamflame</p>
      <p>本站基于vue3引擎</p>
      <p>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51172502000168" style="color: #fff; text-align: center">
          <p><img src="../../public/images/beian.png" style="vertical-align:middle"/>&nbsp;川公网安备51172502000168号</p>
        </a>
      </p>
      <p>
        <a target="_blank" href="http://beian.miit.gov.cn/" style="color: #fff; text-align: center">蜀ICP备2021012733号-2</a>
      </p>
      <p ref="yiyan"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {};
  },
  mounted() {
    this.getyiyan();
  },
  methods: {
    getyiyan() {
      this.$axios.get("https://api.yum6.cn/yan.php?format=json").then((res) => {
        this.$refs.yiyan.innerText = res.data.text;
      });
    },
  },
};
</script>

<style scoped>
.footer {
  position: relative;
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: Gradient 10s ease infinite;
  user-select: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: 140px;
}
@keyframes Gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
.footer-wrap {
  position: relative;
  padding: 2rem 1rem;
  text-align: center;
}
.footer-wrap {
  color: #fff !important;
  font-weight: lighter;
}
</style>